<template>
    <view class="recycle_order-container">
        <!-- 地址 -->
        <view class="recycle_order-address">
            <view class="recycle_order-address-header">
                <view class="recycle_order-address-header-title">自行寄出</view>
                <view class="recycle_order-address-btn--copy" @tap="onCopyAddress">复制地址</view>
            </view>
            <view class="recycle_order-address-content mt30">
                <view class="recycle_order-address-icon mr20">
                    <u-icon name="map" size="44rpx" color="#D7D7D7" />
                </view>
                <view>
                    <view class="mb10 md" style="color: #222222;">
                        <text>收件地址:</text>
                        <text class="ml10">{{ plat.user_name }}</text>
                        <text class="ml20">{{ plat.user_mobile }}</text>
                    </view>
                    <view class="mb20 sm lighter">{{ plat.user_address }}</view>
                    <view class="ornament xs">请在下单后及时将商品寄出</view>
                </view>
            </view>
        </view>
        
        <!-- 价格 -->
        <view class="recycle_order-price">
            <view class="row-between nr muted">
                <text>预估价</text>
                <text>¥{{ price }}</text>
            </view>
            <view class="row-between lg normal mt30">
                <text>本单共可收入</text>
                <text>¥{{ price }}</text>
            </view>
        </view>
        
        <!-- tips -->
        <view class="mt30 xs muted">* 对方收到商品，质检通过后将会打款至您的账户余额</view>
		
		<u-form :error-type="['toast']" :model="form" ref="uForm">
			<view v-show="isMEID">
				<view class="recycle-meid">
					<!-- MEID -->
					<u-form-item prop="meid" :border-bottom="false">
						<u-field
						  label="MEID" 
						  type="input"
						  v-model="form.meid"
						  maxlength="20"
						  placeholder-style="#999999"
						  placeholder="请输入设备MEID" 
						  :border-bottom="false"
						/>
					</u-form-item>
					<!-- 序列号 -->
					<u-form-item prop="meid" :border-bottom="false">
						<u-field
						  label="序列号" 
						  type="input"
						  v-model="form.sn"
						  maxlength="20"
						  placeholder-style="#999999"
						  placeholder="请输入设备序列号" 
						  :border-bottom="false"
						/>
					</u-form-item>
				</view>
				
				<!-- Tips -->
				<view class="mt20 xs muted">* 必填其中一项（MEID、序列号）</view>
			</view>
		</u-form>

        
        <!-- 提交订单 -->
        <view class="recycle_order-submit-box">
            <u-checkbox-group>
            	<u-checkbox v-model="isAgree" shape="circle">
                    <view class="sm row" style="padding: 20rpx 0;">
                        <view class="lighter">已阅读并同意协议</view>
                        <view class="primary" @tap.stop="goAgreement">《回收协议》</view>
                    </view>
                </u-checkbox>
            </u-checkbox-group>

            <view class="recycle_order-btn-submit" @tap="handleOrderSubmit">提交订单</view>
        </view>
		
		
		<!-- 回收协议 -->
		<u-popup v-model="showRecycleProtocol" mode="center" border-radius="20">
			<view class="protocol">
				<view class="protocol-title">回收协议</view>
				<scroll-view scroll-y="true" class="protocol-content">
					<u-parse :html="protocolHtml" />
				</scroll-view> 
				<view class="protocol-confirm" @tap="showRecycleProtocol = false">我知道了</view>
			</view>
		</u-popup>
		
    </view>
</template>

<script>
    import { 
		postSubmitOrder,
		getRecycleProtocol
	} from '@/api/recycle'
    
    export default {
        data() {
            return {
                isAgree: false,     		// 是否已阅读《回收用户协议》
                order: null,        		// 订单表单数据
                plat: null,         		// 回收地址信息
                price: '',          		// 评估价
				showRecycleProtocol: false,	// 回收协议
				protocolHtml: '',			// 回收协议内容
				form: {
					sn: '',					// 序列号
					meid: ''				// MEID
				},
				isMEID: false,				// MEID开关
				mode: 'recycle',			// 页面模式[回收|换租]
				
				// 表单验证
				rules: {
					meid: [{ 
				        validator: () => {
							const form = this.form;
							return (!this.isMEID) || (form.sn || form.meid) ?
							  true :
							  false ;
						},
				        message: '请输入MEID或序列号', 
					}]
				}
            }
        },
        methods: {
            // 复制地址
            onCopyAddress() {
                const data = this.plat;
                uni.setClipboardData({
                    data: `收件人:${ data.user_name } 联系方式:${ data.user_mobile } 收件地址:${ data.user_address }`,
					success() {
						uni.showToast({ title: '复制成功', icon: 'none' });
					}
                });
            },
            
            // 订单提交
            handleOrderSubmit() {
                if (!this.isAgree) return uni.showToast({title: '请阅读《回收用户协议》', icon: 'none'});
                
				this.$refs.uForm.validate(valid => {
					if (!valid) return console.log('验证失败');
					
					const form = this.form;
					const order = this.order;
					// 删除冗余参数
					delete order.is_meid;
					postSubmitOrder({
						...this.order,
						meid: form.meid,
						serial_number: form.sn,
						item_ids: this.order.item_ids.join(),
					}).then(res => {
						if (res.code != 1) return;
						uni.redirectTo({
							url: '/bundle/pages/recycle_order_submited/recycle_order_submited'
							  + '?id=' + res.data.order_id
							  + '&price=' + this.price
						});
					});
				});
            },
            
            // 跳转用户协议
            goAgreement() {
                this.isAgree = true;
				this.showRecycleProtocol = true;
            },
        },
    
        onLoad(options) {
			console.log(options);
            const order = JSON.parse(options.order);
            const plat = JSON.parse(options.plat);
            
            this.order = order;
            this.plat = plat;
			this.mode = options.mode;
            this.price = options.price;
			this.isMEID = order.is_meid;
			
			getRecycleProtocol().then(({code, data}) => {
				if (code != 1) return;
				this.protocolHtml = data;
			});
        },
		
		onReady() {
		    // 表单检验
			this.$refs?.uForm?.setRules(this.rules);
		}
    }
</script>

<style scoped>
    .recycle_order-container {
        padding: 0 20rpx; 
    }
    
    .recycle_order-address,
    .recycle_order-price {
        margin-top: 20rpx;
        padding: 20rpx;
        border-radius: 10px;
        background-color: #FFFFFF;
    }
	
	.recycle-meid {
		padding: 0 20rpx;
		border-radius: 10px;
		margin-top: 20rpx;
		background-color: #FFFFFF;
	}
	
	.recycle-meid >>> .u-field {
		flex: 1;
	    padding: 0;
	}
    
    .recycle_order-address-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .recycle_order-address-header-title {
        font-size: 32rpx;
        color: #333333;
    }
    
    .recycle_order-address-btn--copy {
        padding: 6rpx 24rpx;
        border: 1rpx solid #24A3FF;
        border-radius: 2px;
        font-size: 22rpx;
        color: #24A3FF;
    }
    
    .recycle_order-address-content {
        display: flex;
    }
    
    .recycle_order-submit-box {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 30rpx;
        background-color: #FFFFFF;
    }
    
    .recycle_order-btn-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 84rpx;
        margin-bottom: 10rpx;
        border-radius: 30px;
        font-size: 32rpx;
        background-image: linear-gradient(to right, #24A3FF, #3187FD);
        color: #FFFFFF;
    }
	
	.protocol {
		display: flex;
		flex-direction: column;
		width: 88vw;
		height: 88vh;
		padding: 20rpx;
		background-color: #FFFFFF;
	}
	
	.protocol-title {
		padding: 20rpx 0;
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		color: #333333;
	}
	
	.protocol-content {
		flex: 1;
		overflow: scroll;
	}
	
	.protocol-confirm {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 72rpx;
		border-radius: 50px;
		margin-top: 20rpx;
		font-size: 32rpx;
		background-color: #24A3FF;
		color: #FFFFFF;
	}
</style>
